<template>
 <div class="reportContent">
  <h3>{{title}}</h3>
  <div class="date">{{date|time}}</div>
  <div class="content">
    {{content}}
  </div>
  <div class="imgList">
    <div v-for="(item,index) in picture" :key="index">
      <img :src="item" alt="">
    </div>
  </div>
 </div>
</template>

<script>
 export default {
    data () {
      return {
        content:'',
        date:'',
        title:'',
        picture:[]
      }
    },
    created(){
      this.content = this.$route.query.content
      this.date = this.$route.query.create_time
      this.title = this.$route.query.title
      this.picture = this.$route.query.picture
    },
    mounted() {
      this.$progress.done()
    },
    components: {

    }
 }
</script>

<style lang="scss">
.reportContent{
  min-height: 100vh;
  box-sizing: border-box;
  padding: 25px 30px;
  h3{
    font-size:17px;
    font-family:PingFang-SC-Bold;
    font-weight:bold;
    color:rgba(51,51,51,1);
    margin: 0;
    margin-bottom: 12px;
  }
  .date{
    font-size:12px;
    font-family:PingFang-SC-Medium;
    font-weight:500;
    color:rgba(153,153,153,1);
    margin-bottom: 25px;
  }
  .content{
    font-size:14px;
    font-family:PingFang-SC-Medium;
    font-weight:500;
    color:rgba(102,102,102,1);
    line-height:25px;
    margin-bottom: 20px;
    text-indent: 2em;
  }
  .imgList{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 100%;
    div{
      width: 30%;
      height:71px;
      border-radius:4px;
      overflow: hidden;
      // background-color: pink;
      margin-right: 12px;
      margin-bottom: 12px;
      &:nth-of-type(3n){
        margin: 0;
      }
      img{
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
